<template>
<div class="index">
	<div class="banner full-width">
		<c-head :nav="nav" class="head-bg"></c-head>
		<div class="banner-con">
			<div class="table">
				<div class="mid">
					<div class="slogn">立足生命科学&nbsp;·&nbsp;致力营养健康</div>
					<p class="data-title">中粮数字健康云平台</p>
					<p class="data-type">
						健康食谱<span></span>健康测评<span></span>职业健康
					</p>
				</div>
			</div>
			
		</div>
		
	</div>
	<div class="my-data wrap-width">
		<span class="title">我们的数据</span>
		<div class="clearfix data">
			<div class="fl">
				<router-link to='/service/recipe'>
					<img src="../assets/img/recipe-icon.png">
					<span>健康食谱</span>
				</router-link>
			</div>
			<div class="fl">
				<router-link to='/service/test'>
					<img src="../assets/img/health-icon.png">
					<span>健康测评</span>
				</router-link>
			</div>
			<div class="fl">
				<router-link to='/service/others'>
					<img src="../assets/img/test-icon.png">
					<span>职业健康</span>
				</router-link>
			</div>
		</div>
	</div>
	<div class="full-width health-recipe">
		<router-link to='/service/recipe'>
			<div class="wrap-width table">
				<div class="mid midwrapper">
					<span>健康食谱</span>
					<P>20000+食谱数据、个性食谱推荐 ...</P>
				</div>
			</div>
		</router-link>
	</div>
	<div class="blank"></div>
	<div class="full-width health-test">
		<router-link to='/service/test'>
			<div class="wrap-width table">
				<div class="mid midwrapper">
					<span>健康测试</span>
					<P>知识测评、趣味测评、各类测评</P>
				</div>
			</div>
		</router-link>
	</div>
	<div class="blank"></div>
	<div class="full-width professional">
		<router-link to='/service/others'>
			<div class="wrap-width table">
				<div class="mid midwrapper">
					<span>职业健康</span>
					<P>全行业职业健康标准、全量包装食品条形码</P>
				</div>
			</div>
		</router-link>
	</div>
	<div class="blank"></div>
	<foot></foot>
</div>
</template>
<script>
    import head from '@/components/head'
    import foot from '@/components/footer'
    export default {
        data(){
            return {
                nav: 0
            }
        },
        components: {
            cHead: head,
            foot
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
	@media screen and (min-width: 600px) and (max-width: 800px)
		.index
			.banner
				height 380px
				.banner-con
					height 295px
					.slogn
						font-size 30px
						margin-top 0px
					.data-title
						font-size 20px
						margin-top 25px
					.data-type
						font-size 14px
						margin-top 30px
						span
							height 14px
							margin 0 20px
			.my-data
				height 290px
				.title
					font-size 23px
					line-height 1
					text-align center
					padding-top 2.7*@font-size
				.data
					img
						padding 50px 0px 10px 0px
						width 58px
						height 55px
					span
						font-size 16px
			.health-recipe, .health-test, .professional
				height 220px
			.professional
				height 220px
			.midwrapper
				span
					font-size 22px
				p
					font-size 17px
			
	@media screen and (min-width: 450px) and (max-width: 600px)
		.index
			.banner
				height 265px
				.banner-con
					height 215px
					.slogn
						font-size 23px
						margin-top 0px
					.data-title
						font-size 18px
						margin-top 20px
					.data-type
						font-size 12px
						margin-top 25px
						span
							width 1px
							height 12px
							margin 0 16px
			.my-data
				height 200px
				.title
					font-size 20px
					line-height 1
					text-align center
					padding-top 1.85*@font-size
				.data
					img
						padding 35px 0px 8px 0px
						width 41.5px
						height 39.5px
					span
						font-size 13px
			.health-recipe, .health-test, .professional
				height 190px
			.professional
				height 190px
			.midwrapper
				span
					font-size 20px
				p
					font-size 16px
	@media screen and (max-width: 450px)
		.index
			.banner
				height 225px
				.banner-con
					height 175px
					.slogn
						font-size 20px
						margin-top 0px
					.data-title
						font-size 16px
						margin-top 16px
					.data-type
						font-size 11px
						margin-top 18px
						span
							width 1px
							height 11px
							margin 0 12px
			.my-data
				height 180px
				.title
					font-size 18px
					line-height 1
					text-align center
					padding-top 1.85*@font-size
				.data
					img
						padding 30px 0px 5px 0px
						width 39.5px
						height 38px
					span
						font-size 12px
			.health-recipe, .health-test, .professional
				height 170px
			.professional
				height 170px
			.midwrapper
				span
					font-size 18px
				p
					font-size 14px
	.midwrapper
		text-align center
		color #fff
		background-image url('../assets/img/black.png')
		background-repeat no-repeat
		background-size cover
		background-position center
		span
			display inline-block
			font-size 30px
			line-height 1
		p
			font-size 20px
			line-height 3.3
	.banner
		height 650px
		background-image url('../assets/img/banner.png')
		background-repeat no-repeat
		background-size cover
		background-position center
		.banner-con
			height 100%
			width 100%
			text-align center
			.slogn
				text-align center
				font-size 60px
				color #fff
				line-height 1
				margin-top 38px
			.data-title
				font-size 38px
				color #e1e1e2
				line-height 1
				margin-top 48px
			.data-type
				font-size 18px
				color #a9acaf
				line-height 1
				margin-top 50px
				span
					background-color #a9acaf
					display inline-block
					width 2px
					height 18px
					margin 0 35px
	.my-data
		height 480px
		text-align center
		color #222
		.title
			font-size 30px
			line-height 1
			text-align center
			padding-top 3.5*@font-size
			display block
			box-sizing border-box
		.data
			img
				padding 89px 0px 32px 0px
				width 83px
				height 79px
			span
				display block
				text-align center
				font-size 20px
				line-height 1.5
				color #222
			div.fl
				width 28%
				&:nth-child(2)
					margin 0 8%
	.health-recipe
		height 410px
		background-image url('../assets/img/sbanner1.jpg')
		background-repeat no-repeat
		background-size cover
		background-position center
	.health-test
		height 410px
		background-image url('../assets/img/sbanner2.png')
		background-repeat no-repeat
		background-size cover
		background-position center
	.professional
		height 410px
		background-image url('../assets/img/banner3.png')
		background-repeat no-repeat
		background-size cover
		background-position center
	
</style>
